<!-- build time:Tue Dec 17 2019 19:26:46 GMT+0800 (GMT+08:00) --><!doctype html><html class="theme-next mist" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.8.0"><meta name="google-site-verification" content="7Tau9WyVgxnsEY9oYedu9g0U6_8akOX3wiKbaYcrg9A"><meta name="baidu-site-verification" content="EVwLiaxdxX"><link href="/css/xps13.css" rel="stylesheet" type="text/css"><link href="/css/message.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css"><meta name="keywords" content="Bootstrap,"><link rel="alternate" href="/atom.xml" title="MrBird" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1"><meta name="description" content="BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件，提供了非常丰富的校验规则。准备工作要使用BootstrapValidator，需要先引入必要的文件：12345&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap/css/bootstrap-3.0.3.min.css&quot;/&amp;gt;&amp;lt;link"><meta name="keywords" content="Bootstrap"><meta property="og:type" content="article"><meta property="og:title" content="BootstrapValidator指南"><meta property="og:url" content="http://mrbird.cc/BootstrapValidator指南.html"><meta property="og:site_name" content="MrBird"><meta property="og:description" content="BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件，提供了非常丰富的校验规则。准备工作要使用BootstrapValidator，需要先引入必要的文件：12345&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap/css/bootstrap-3.0.3.min.css&quot;/&amp;gt;&amp;lt;link"><meta property="og:locale" content="zh-Hans"><meta property="og:image" content="http://mrbird.cc/img/578a01ef884cd58e02669a5ed868d593.png"><meta property="og:updated_time" content="2019-10-28T12:14:46.223Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="BootstrapValidator指南"><meta name="twitter:description" content="BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件，提供了非常丰富的校验规则。准备工作要使用BootstrapValidator，需要先引入必要的文件：12345&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap/css/bootstrap-3.0.3.min.css&quot;/&amp;gt;&amp;lt;link"><meta name="twitter:image" content="http://mrbird.cc/img/578a01ef884cd58e02669a5ed868d593.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Mist",sidebar:{position:"left",display:"always",offset:12,offset_float:0,b2t:!1,scrollpercent:!1},fancybox:!1,motion:!1}</script><title>BootstrapValidator指南 | MrBird</title></head><body ondragstart="return!1" class="animsition" lang="zh-Hans" style="overflow-x:hidden;padding-right:280px"><script type="text/javascript" src="/js/mo.min.js"></script><style>@media (min-width:768px) and (max-width:991px){body .header-innerr{width:700px!important}}.header-innerr{margin:0 auto;padding:100px 0 70px;width:880px}@media (min-width:1600px){.container .header-innerr{width:1200px}}.header-innerr{position:relative}.header-innerr{padding:20px 0 0}.header-innerr:after,.header-innerr:before{content:" ";display:table}.header-innerr:after{clear:both}@media (max-width:767px){.header-innerr{width:auto;padding:10px;margin-bottom:-20px}}</style><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title" style="font-family:Merienda;font-size:1.3rem">MrBird</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section">HOME</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section">ARCHIVES</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section">TAGS</a></li><li class="menu-item menu-item-friends"><a href="/friends/" rel="section">FRIENDS</a></li><div class="sidebar-toggle" style="display:none"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="Search" spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div><div class="header-innerr"><div class="note info" style="margin:0;letter-spacing:.15px">🐤手把手教你搭建<strong>Spring Cloud微服务权限系统</strong>（从零到部署）：<a style="color:#40dab2;font-weight:600" href="https://www.kancloud.cn/mrbird/spring-cloud" target="_blank">https://www.kancloud.cn/mrbird/spring-cloud</a></div></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://mrbird.cc/BootstrapValidator指南.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="MrBird"><meta itemprop="description" content=""><meta itemprop="image" content="/images/blogImage.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="MrBird"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">BootstrapValidator指南</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-07-14T11:20:08+08:00">2017-07-14 </time></span><span></span> <span class="post-meta-divider">|</span> <span class="page-pv"><i class="fa fa-laptop"></i>&nbsp;&nbsp;Visit count <span class="busuanzi-value" id="busuanzi_value_page_pv"></span></span></div></header><div class="post-body" itemprop="articleBody"><p>BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件，提供了非常丰富的校验规则。</p><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><p>要使用BootstrapValidator，需要先引入必要的文件：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"bootstrap/css/bootstrap-3.0.3.min.css"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"bootstrap/css/bootstrapValidator-0.5.2.min.css"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"js/jquery-1.11.1.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"bootstrap/js/bootstrap-3.0.3.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"bootstrap/js/bootstrapValidator-0.5.2.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>其中需要注意的是jQuery版本必须大于1.9.1。文件下载地址：<a href="https://drive.google.com/open?id=1FVhZT899gewytpLVTwD-4x2uR1tSXFkN" target="_blank" rel="noopener">https://drive.google.com/open?id=1FVhZT899gewytpLVTwD-4x2uR1tSXFkN</a>。<a id="more"></a></p><p>需要校验的表单必须由<code>&lt;form&gt;&lt;/form&gt;</code>标签包裹，并且需要验证的字段由<code>&lt;div class=&quot;form-group&quot;&gt;&lt;/div&gt;</code>包裹，并且有<code>name</code>属性。比如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>labelName<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">name</span>=<span class="string">"fieldName"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><h2 id="绑定校验规则"><a href="#绑定校验规则" class="headerlink" title="绑定校验规则"></a>绑定校验规则</h2><p>对<code>form</code>元素绑定校验规则：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).bootstrapValidator(&#123;</span><br><span class="line">    <span class="comment">// 指定不验证的情况</span></span><br><span class="line">    <span class="comment">// 值可设置为以下三种类型：</span></span><br><span class="line">    <span class="comment">// 1、String  ':disabled, :hidden, :not(:visible)'</span></span><br><span class="line">    <span class="comment">// 2、Array  默认值  [':disabled', ':hidden', ':not(:visible)']</span></span><br><span class="line">    <span class="comment">// 3、带回调函数  </span></span><br><span class="line">    <span class="comment">//  [':disabled', ':hidden', function($field, validator) &#123;</span></span><br><span class="line">            <span class="comment">// $field 当前验证字段dom节点</span></span><br><span class="line">            <span class="comment">// validator 验证实例对象 </span></span><br><span class="line">            <span class="comment">// 可以再次自定义不要验证的规则</span></span><br><span class="line">            <span class="comment">// 必须要return，return true or false; </span></span><br><span class="line">            <span class="keyword">return</span> !$field.is(<span class="string">':visible'</span>);</span><br><span class="line">        &#125;]</span><br><span class="line">    <span class="comment">// </span></span><br><span class="line">    excluded: [<span class="string">':disabled'</span>, <span class="string">':hidden'</span>, <span class="string">':not(:visible)'</span>],</span><br><span class="line">    <span class="comment">// 生效规则</span></span><br><span class="line">    <span class="comment">// enabled:字段值发生变化就触发验证</span></span><br><span class="line">    <span class="comment">// disabled/submitted:点击提交时触发验证</span></span><br><span class="line">    live: <span class="string">'disabled'</span>,</span><br><span class="line">    <span class="comment">// 图标 </span></span><br><span class="line">    feedbackIcons: &#123;</span><br><span class="line">        valid: <span class="string">'glyphicon glyphicon-ok'</span>,</span><br><span class="line">        invalid: <span class="string">'glyphicon glyphicon-remove'</span>, </span><br><span class="line">        validating: <span class="string">'glyphicon glyphicon-refresh'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    fields: &#123;</span><br><span class="line">        field1: &#123; <span class="comment">// 字段名</span></span><br><span class="line">            validators: &#123;</span><br><span class="line">                <span class="comment">// ...</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        field2: &#123;</span><br><span class="line">            validators: &#123;</span><br><span class="line">                <span class="comment">// ...</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>下面具体介绍各种校验规则。</p><h3 id="非空校验"><a href="#非空校验" class="headerlink" title="非空校验"></a>非空校验</h3><p>非空校验是最常见的一种校验之一，比如对<code>name</code>属性为<code>userName</code>的字段进行非空校验：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">userName: &#123; <span class="comment">// name属性值</span></span><br><span class="line">    validators: &#123;</span><br><span class="line">        notEmpty: &#123; <span class="comment">// 非空校验</span></span><br><span class="line">            message: <span class="string">'用户名不能为空!'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="文本长度校验"><a href="#文本长度校验" class="headerlink" title="文本长度校验"></a>文本长度校验</h3><p>比如对<code>userName</code>的长度进行控制：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">userName: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        stringLength: &#123; <span class="comment">// 长度校验</span></span><br><span class="line">            min: <span class="number">3</span>,</span><br><span class="line">            max: <span class="number">10</span>,</span><br><span class="line">            message: <span class="string">'用户名长度%s~%s个字符！'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><p>这里<code>userName</code>的长度被限制为3~10个字符（包含3和10）。<code>%s</code>分别表示3和10。</p><h3 id="正则校验"><a href="#正则校验" class="headerlink" title="正则校验"></a>正则校验</h3><p>BootstrapValidator支持正则表达式校验，比如：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">userName: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        regexp: &#123; <span class="comment">//正则校验</span></span><br><span class="line">            regexp: <span class="regexp">/^[a-zA-Z0-9_]+$/</span>, </span><br><span class="line">            message:<span class="string">'用户名仅支数字，字母和下划线的组合'</span></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="远程校验"><a href="#远程校验" class="headerlink" title="远程校验"></a>远程校验</h3><p>远程校验使用Ajax异步请求从服务端进行校验，比如校验<code>userName</code>的值是否已经存在。如：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">userName: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        remote: &#123;</span><br><span class="line">            url: <span class="string">"user/confirmUserName.do"</span>,</span><br><span class="line">            message: <span class="string">"用户名已存在"</span>,</span><br><span class="line">            type: <span class="string">"get"</span>,</span><br><span class="line">            data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 额外的数据，默认为当前校验字段,不需要的话去掉即可</span></span><br><span class="line">                <span class="keyword">return</span> &#123;</span><br><span class="line">                    <span class="string">"name"</span>: $(<span class="string">"input[name='userName']"</span>).val().trim()</span><br><span class="line">                &#125;;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><p>假如<code>userName</code>字段填写的值为123，则参数格式为：<code>userName=123&amp;name=123</code>，所以如果无需额外参数的话，<code>data</code>属性可以略去。</p><p>服务端：</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@RequestMapping</span>(<span class="string">"user/confirmUserName"</span>)</span><br><span class="line"><span class="meta">@ResponseBody</span></span><br><span class="line"><span class="function"><span class="keyword">public</span> Map&lt;String,Boolean&gt; <span class="title">confirmUserName</span><span class="params">(String name)</span> </span>&#123;</span><br><span class="line">    Map&lt;String,Boolean&gt; map = <span class="keyword">new</span> HashMap&lt;String, Boolean&gt;();</span><br><span class="line">    map.put(<span class="string">"valid"</span>, <span class="keyword">true</span>);</span><br><span class="line">    <span class="comment">// 模拟数据库中已经存在“Mike”</span></span><br><span class="line">    <span class="keyword">if</span>(name.equals(<span class="string">"Mike"</span>))&#123;</span><br><span class="line">        <span class="comment">// 设置校验不通过</span></span><br><span class="line">        map.put(<span class="string">"valid"</span>, <span class="keyword">false</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> map;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><p>当<code>valid</code>为<code>true</code>的时候，表示Mike用户名可用；当<code>valid</code>为<code>false</code>的时候，表示Mike已被注册。</p><h3 id="邮箱校验"><a href="#邮箱校验" class="headerlink" title="邮箱校验"></a>邮箱校验</h3><p>BootstrapValidator提供了邮箱校验的方法，可以不用手动编写邮箱的正则表达式：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">email: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        emailAddress: &#123; <span class="comment">// 可以不用自己写正则</span></span><br><span class="line">            message: <span class="string">'邮箱格式不正确'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="对比校验"><a href="#对比校验" class="headerlink" title="对比校验"></a>对比校验</h3><p>对比校验就是指当前字段的值和别的字段的值相比较，产生校验结果。常用于密码字段，比如有如下<code>form</code>表单：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>请输入密码<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">name</span>=<span class="string">"password"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span>请再次输入密码<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">name</span>=<span class="string">"confirmPassword"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>常用的校验规则如下：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">password: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        notEmpty: &#123;</span><br><span class="line">            message: <span class="string">'请输入密码'</span></span><br><span class="line">        &#125;,</span><br><span class="line">        different: &#123; <span class="comment">// 比较是否不同，否的话校验不通过</span></span><br><span class="line">            field: <span class="string">'userName'</span>, <span class="comment">// 和userName字段比较</span></span><br><span class="line">            message: <span class="string">'密码不能与用户名相同！'</span>	</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line">confirmPassword: &#123; </span><br><span class="line">    validators: &#123;</span><br><span class="line">        notEmpty: &#123;</span><br><span class="line">            message: <span class="string">'请再次确认密码！'</span></span><br><span class="line">        &#125;,</span><br><span class="line">        identical: &#123; <span class="comment">// 比较是否相同，否的话校验不通过</span></span><br><span class="line">            field: <span class="string">'password'</span>, <span class="comment">// 和password字段比较</span></span><br><span class="line">            message: <span class="string">'两次密码输入不一致'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="复选框校验"><a href="#复选框校验" class="headerlink" title="复选框校验"></a>复选框校验</h3><p>复选框校验用于控制复选框的选中个数：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span>&gt;</span>兴趣爱好<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobbies"</span> <span class="attr">value</span>=<span class="string">"swimming"</span> /&gt;</span> 游泳</span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobbies"</span> <span class="attr">value</span>=<span class="string">"fitness"</span> /&gt;</span> 健身</span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobbies"</span> <span class="attr">value</span>=<span class="string">"football"</span> /&gt;</span> 足球</span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobbies"</span> <span class="attr">value</span>=<span class="string">"sleep"</span> /&gt;</span> 睡觉</span><br><span class="line">        <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>校验规则：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">hobbies: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        choice: &#123;</span><br><span class="line">            min: <span class="number">1</span>,</span><br><span class="line">            max: <span class="number">3</span>,</span><br><span class="line">            message: <span class="string">'请选择1~3项兴趣爱好'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="数字范围校验"><a href="#数字范围校验" class="headerlink" title="数字范围校验"></a>数字范围校验</h3><p>数字范围校验类似与文本长度校验，不过其一般用于数字类型的长度校验，比如限制年龄范围为1~150：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">age: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        between: &#123;</span><br><span class="line">            min: <span class="number">0</span>,</span><br><span class="line">            max: <span class="number">150</span>,</span><br><span class="line">            message: <span class="string">'请输入正常的年龄,范围为%s到%s'</span>,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><p>除了使用<code>between</code>外，还可以使用<code>lessThan</code>和<code>greaterThan</code>来实现和<code>between</code>类似的效果：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">age: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        lessThan: &#123;</span><br><span class="line">            value: <span class="number">150</span>,</span><br><span class="line">            inclusive: <span class="literal">true</span>, <span class="comment">// 是否包含150，true为包含</span></span><br><span class="line">            message: <span class="string">'年龄必须小于等于%s'</span></span><br><span class="line">        &#125;,</span><br><span class="line">        greaterThan: &#123;</span><br><span class="line">            value: <span class="number">0</span>,</span><br><span class="line">            inclusive: <span class="literal">false</span>, 不包含<span class="number">0</span></span><br><span class="line">            message: <span class="string">'年龄必须大于%s'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><h3 id="文件校验"><a href="#文件校验" class="headerlink" title="文件校验"></a>文件校验</h3><p>文件校验用于对上传的附件类型，大小等进行限制，常用的规则如下：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">files: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        file:  &#123;</span><br><span class="line">            maxSize: <span class="number">1024</span>*<span class="number">1024</span>, <span class="comment">// 文件大小，单位为b，这里为1mb</span></span><br><span class="line">            extension: <span class="string">'jpg,png'</span>, <span class="comment">// 格式</span></span><br><span class="line">            type: <span class="string">'image/jpeg,image/png'</span>, <span class="comment">// 对应的MIME type</span></span><br><span class="line">            message: <span class="string">'文件不合法，必须小于1MB，并且格式为jpg或png'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p></p><p>更详细的校验规则如下表所示：</p><table><tr><th>选项</th><th>HTML属性</th><th>类型</th><th>描述</th></tr><tr><td>extension</td><td>data-fv-file-extension</td><td>String</td><td>允许的扩展名，用逗号分隔</td></tr><tr><td>maxFiles</td><td>data-fv-file-maxfiles</td><td>Number</td><td>最大文件数</td></tr><tr><td>maxSize</td><td>data-fv-file-maxsize</td><td>Number</td><td>最大文件大小（以字节为单位）</td></tr><tr><td>maxTotalSize</td><td>data-fv-file-maxtotalsize</td><td>Number</td><td>所有文件的最大大小（以字节为单位）</td></tr><tr><td>minFiles</td><td>data-fv-file-minfiles</td><td>Number</td><td>文件的最小数量</td></tr><tr><td>minSize</td><td>data-fv-file-minsize</td><td>Number</td><td>最小文件大小（以字节为单位）</td></tr><tr><td>minTotalSize</td><td>data-fv-file-mintotalsize</td><td>Number</td><td>所有文件的最小大小（以字节为单位）</td></tr><tr><td>message</td><td>data-fv-file-message</td><td>String</td><td>错误消息</td></tr><tr><td>type</td><td>data-fv-file-type</td><td>String</td><td>允许的<strong>MIME</strong>类型，以逗号分隔。例如：设置<br>image/jpeg,image/png,application/pdf只允许上传JPEG，PNG图像和PDF文档。</td></tr></table>下表显示了常见的<strong>MIME</strong>类型。对于其他<strong>MIME</strong>类型，可以参考<a href="https://www.sitepoint.com/mime-types-complete-list/" target="_blank" rel="noopener">https://www.sitepoint.com/mime-types-complete-list/</a>。<table><br><tr><th>MIME类型</th><th>文件扩展名</th></tr><tr><td>application/msword</td><td>doc</td></tr><tr><td>application/pdf</td><td>pdf</td></tr><tr><td>application/rtf</td><td>rtf</td></tr><tr><td>application/vnd.ms-excel</td><td>xls</td></tr><tr><td>application/vnd.ms-powerpoint</td><td>ppt</td></tr><tr><td>application/x-rar-compressed</td><td>rar</td></tr><tr><td>application/x-shockwave-flash</td><td>swf</td></tr><tr><td>application/zip</td><td>zip</td></tr><tr><td>audio/midi</td><td>mid midi kar</td></tr><tr><td>audio/mpeg,audio/mp3</td><td>mp3</td></tr><tr><td>audio/ogg</td><td>ogg</td></tr><tr><td>audio/x-m4a</td><td>m4a</td></tr><tr><td>audio/x-realaudio</td><td>ra</td></tr><tr><td>image/gif</td><td>gif</td></tr><tr><td>image/jpeg</td><td>jpeg jpg</td></tr><tr><td>image/png</td><td>png</td></tr><tr><td>image/tiff</td><td>tif tiff</td></tr><tr><td>image/vnd.wap.wbmp</td><td>wbmp</td></tr><tr><td>image/x-icon</td><td>ico</td></tr><tr><td>image/x-jng</td><td>jng</td></tr><tr><td>image/x-ms-bmp</td><td>bmp</td></tr><tr><td>image/svg+xml</td><td>svg svgz</td></tr><tr><td>image/webp</td><td>webp</td></tr><tr><td>text/css</td><td>css</td></tr><tr><td>text/html</td><td>html htm shtml</td></tr><tr><td>text/plain</td><td>txt</td></tr><tr><td>text/xml</td><td>xml</td></tr><tr><td>video/3gpp</td><td>3gpp 3gp</td></tr><tr><td>video/mp4</td><td>mp4</td></tr><tr><td>video/mpeg</td><td>mpeg mpg</td></tr><tr><td>video/quicktime</td><td>mov</td></tr><tr><td>video/webm</td><td>webm</td></tr><tr><td>video/x-flv</td><td>flv</td></tr><tr><td>video/x-m4v</td><td>m4v</td></tr><tr><td>video/x-ms-wmv</td><td>wmv</td></tr><tr><td>video/x-msvideo</td><td>avi</td></tr></table><h3 id="callback验证"><a href="#callback验证" class="headerlink" title="callback验证"></a>callback验证</h3><p>callback用于校验验证码等类型，比如要实现下面这样的效果：</p><p><img src="img/578a01ef884cd58e02669a5ed868d593.png" alt="578a01ef884cd58e02669a5ed868d593.png"></p><p>HTML代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">id</span>=<span class="string">"question"</span>&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">name</span>=<span class="string">"answer"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>生成数学算式：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">randomNumber</span>(<span class="params">min, max</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min + <span class="number">1</span>) + min);</span><br><span class="line">&#125;;</span><br><span class="line">$(<span class="string">'#question'</span>).html([randomNumber(<span class="number">1</span>, <span class="number">100</span>), <span class="string">'+'</span>, randomNumber(<span class="number">1</span>, <span class="number">200</span>), <span class="string">'='</span>].join(<span class="string">' '</span>));</span><br></pre></td></tr></table></figure><p></p><p>校验规则：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">answer: &#123;</span><br><span class="line">    validators: &#123;</span><br><span class="line">        callback: &#123;</span><br><span class="line">            message: <span class="string">"答案不正确！"</span>,</span><br><span class="line">            callback: <span class="function"><span class="keyword">function</span>(<span class="params">value, validator</span>)</span>&#123; <span class="comment">// 验证答案是否正确，value为用户输入的值</span></span><br><span class="line">                <span class="keyword">var</span> items = $(<span class="string">'#question'</span>).html().split(<span class="string">' '</span>);</span><br><span class="line">                <span class="keyword">var</span> sum = <span class="built_in">parseInt</span>(items[<span class="number">0</span>]) + <span class="built_in">parseInt</span>(items[<span class="number">2</span>]);</span><br><span class="line">                <span class="keyword">return</span> value == sum;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><p>实际中，可以将上面的校验规则组合在一起，实现更复杂的校验。</p><h2 id="常用事件"><a href="#常用事件" class="headerlink" title="常用事件"></a>常用事件</h2><h3 id="手动触发校验"><a href="#手动触发校验" class="headerlink" title="手动触发校验"></a>手动触发校验</h3><p>手动触发校验包含触发单个字段和触发整个表单：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 整个表单</span></span><br><span class="line">$(<span class="string">"form"</span>).bootstrapValidator(<span class="string">'validate'</span>);</span><br><span class="line"><span class="comment">// 单个字段</span></span><br><span class="line">$(<span class="string">"form"</span>).data(<span class="string">'bootstrapValidator'</span>).validateField(<span class="string">'fieldName'</span>);</span><br></pre></td></tr></table></figure><p></p><h3 id="获取当前表单校验结果"><a href="#获取当前表单校验结果" class="headerlink" title="获取当前表单校验结果"></a>获取当前表单校验结果</h3><p>获取当前表单校验状态，校验通过返回true，否则返回false：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bootstrapValidators = $(<span class="string">"form"</span>).data(<span class="string">'bootstrapValidator'</span>);</span><br><span class="line"><span class="keyword">if</span>(bootstrapValidators.isValid()) &#123;</span><br><span class="line">    <span class="comment">// todo</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><h3 id="重置校验"><a href="#重置校验" class="headerlink" title="重置校验"></a>重置校验</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'form'</span>).data(<span class="string">'bootstrapValidator'</span>).resetForm(<span class="literal">true</span>); <span class="comment">// 重置校验</span></span><br><span class="line">$(<span class="string">'form'</span>)[<span class="number">0</span>].reset();<span class="comment">// 表单清空</span></span><br></pre></td></tr></table></figure><script>$(".post-body a").not(".thispage").addClass("ignore-href").attr("target","_blank")</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center;color:#878787"><div>请作者喝瓶肥宅水~</div><button id="rewardButton" style="margin-top:10px" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span style="height:46px;width:46px;line-height:46px;border-radius:50%;color:#fe5f55;font-weight:600;background:#ffd5be;border:none;box-shadow:0 4px 8px 0 rgba(255,213,190,.4)">￥</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/img/wechat_pay.png" alt="MrBird WeChat Pay"></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/img/ali_pay.png" alt="MrBird Alipay"></div></div></div><style>#QR img{width:auto;margin:.8em 1em 0 1em}</style></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong> MrBird</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="http://mrbird.cc/BootstrapValidator指南.html" title="BootstrapValidator指南">http://mrbird.cc/BootstrapValidator指南.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags" style="margin-bottom:1.3rem"><a href="/tags/Bootstrap/" rel="tag"># Bootstrap</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/JavaScript中的块级作用域.html" rel="next" title="JavaScript中的块级作用域"><i class="fa fa-chevron-left"></i> JavaScript中的块级作用域</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/CSS3边框相关属性.html" rel="prev" title="CSS3边框相关属性">CSS3边框相关属性 <i class="fa fa-chevron-right"></i></a></div></div></footer></article><hr><div id="container"></div><div class="post-spread"><div id="comment-div"></div><style>.valine .vlist{margin-bottom:3rem}.valine .vwrap .vcontrol .col.col-60{text-align:left}.valine .vlist .vcard .vhead,.valine .vlist .vcard section .vfooter{text-align:left}.valine .vlist .vcard section{padding-bottom:.5rem!important}.vname{color:#42b983!important}.valine .vinfo .col{text-align:left;margin-left:-27rem}div#comment-div{margin-bottom:-8rem}.valine .vlist .vcard .vcontent .code,.valine .vlist .vcard .vcontent code,.valine .vlist .vcard .vcontent pre{background:#fbfbfb}.valine .vlist .vcard .vcontent a{color:#42b983}.valine .vlist .vcard .vimg{border-radius:3px}.valine .vbtn{border-radius:2px;padding:.3rem 1.25rem}.valine .vbtn:active,.valine .vbtn:hover{color:#42b983;border-color:#42b983;background-color:#fff}.valine .vwrap .vheader .vinput:focus{border-bottom-color:#42b983}.valine .vlist .vcard .vcontent.expand:before{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.2)));background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2))}.valine .vlist .vcard .vcontent.expand:after{content:"点击展开";font-size:.4rem;text-align:right;left:-1rem;background:hsla(0,0%,100%,.2)}.valine .vlist .vcard section .vfooter .vat{color:#b3b3b3}.valine .vlist .vcard section .vfooter .vat:hover{color:#42b983}.vcontent img{margin:0}.valine .info{display:none}</style><script type="text/javascript" src="/js/av.min.js"></script><script type="text/javascript" src="/js/Valine.min.js"></script><script type="text/javascript" src="/js/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE),new Valine({el:"#comment-div",notify:!1,verify:!0,appId:"SMcDFP1bN1jgb9Lo8JmtICHm-gzGzoHsz",appKey:"dH4nrUrt3V5XiJiI6Qyejnbi",placeholder:"",path:window.location.pathname,avatar:"monsterid",guest_info:["nick","mail","link"]});var chicken='<a href="#"><img src="https://image.uisdc.com/wp-content/uploads/2018/06/uisdc-chat-chicken.gif" class="checken"></a>';$("#comment-div").prepend(chicken)</script></div></div><script>var $bqinline=$("img[alt='bq-inline']");$bqinline.css({width:"2.3rem",height:"2.3rem",display:"inline","vertical-align":"text-bottom"})</script></div><div class="comments" id="comments"></div></div><aside id="sidebar" class="sidebar" onselectstart="return!1"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Contents</li><li class="sidebar-nav-overview" data-target="site-overview">Site Preview</li></ul><section class="site-overview sidebar-panel"><div class="sidebar-sticky sticky"><div itemscope itemtype="http://schema.org/Person"><div class="author__avatar"><img src="/images/blogImage.jpg" class="author__avatar" alt="MrBird" itemprop="image"></div><div class="author__content"><h3 class="author__name" itemprop="name">MrBird's Blog</h3><p class="author__bio" itemprop="description">A simple blog, code repository, just keep blogging</p></div><div class="author__urls-wrapper"><button class="btn btn--inverse">Follow</button><ul class="author__urls social-icons"><li><a href="http://map.baidu.com/?newmap=1&s=s%26wd%3D%E7%A6%8F%E5%B7%9E%E5%B8%82%26c%3D300&from=alamap&tpl=mapcity" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;FuZhou,CN</a></li><li><a href="https://love.mrbird.cc" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-diamond" aria-hidden="true"></i>&nbsp;&nbsp;Love</a></li><li><a href="https://cloud.mrbird.cn" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-chain" aria-hidden="true"></i>&nbsp;&nbsp;FEBS</a></li><li><a href="/atom.xml" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-rss" aria-hidden="true"></i>&nbsp;&nbsp;RSS</a></li><li><a href="https://gitee.com/mrbirdd" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-codepen" aria-hidden="true"></i>&nbsp;&nbsp;Gitee</a></li><li><a href="https://github.com/wuyouzhuguli" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-github-alt" aria-hidden="true"></i>&nbsp;&nbsp;GitHub</a></li><li><a href="javascript:;" class="popup-trigger"><i class="fa fa-fw fa-search" aria-hidden="true"></i>&nbsp;&nbsp;Search</a></li></ul></div></div></div><script>var $urls=$(".author__urls").find("a");$urls.each(function(){var o=$(this);o.mouseenter(function(){o.css({color:"#414547"})}),o.mouseleave(function(){o.css({color:""})})})</script></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#准备工作"><span class="nav-number">1.</span> <span class="nav-text">准备工作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#绑定校验规则"><span class="nav-number">2.</span> <span class="nav-text">绑定校验规则</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#非空校验"><span class="nav-number">2.1.</span> <span class="nav-text">非空校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本长度校验"><span class="nav-number">2.2.</span> <span class="nav-text">文本长度校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#正则校验"><span class="nav-number">2.3.</span> <span class="nav-text">正则校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#远程校验"><span class="nav-number">2.4.</span> <span class="nav-text">远程校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#邮箱校验"><span class="nav-number">2.5.</span> <span class="nav-text">邮箱校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对比校验"><span class="nav-number">2.6.</span> <span class="nav-text">对比校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#复选框校验"><span class="nav-number">2.7.</span> <span class="nav-text">复选框校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数字范围校验"><span class="nav-number">2.8.</span> <span class="nav-text">数字范围校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文件校验"><span class="nav-number">2.9.</span> <span class="nav-text">文件校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#callback验证"><span class="nav-number">2.10.</span> <span class="nav-text">callback验证</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常用事件"><span class="nav-number">3.</span> <span class="nav-text">常用事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#手动触发校验"><span class="nav-number">3.1.</span> <span class="nav-text">手动触发校验</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#获取当前表单校验结果"><span class="nav-number">3.2.</span> <span class="nav-text">获取当前表单校验结果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#重置校验"><span class="nav-number">3.3.</span> <span class="nav-text">重置校验</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer" onselectstart="return!1"><div class="footer-inner"><div class="copyright">&copy; 2016 - <span itemprop="copyrightYear">2019</span>&nbsp;&nbsp; <span class="author" itemprop="copyrightHolder">MrBird</span>&nbsp;&nbsp;|<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>&nbsp;&nbsp;UV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_uv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span> &nbsp;&nbsp;PV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_pv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span></div></div></footer><div class="back-to-top"><span style="font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:1.2em;font-weight:600">TOP</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":search_path.endsWith("json")&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var C=[];0!=g.length;){var $=g[g.length-1],m=$.position,x=$.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),C.push(r(p,w,y,g))}C.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&(C=C.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",C.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body><script>$(function(){$("a").not(".nav-link,.cloud-tie-join-count,.ignore-href,.jstree-anchor").addClass("animsition-link")});var burst1=new mojs.Burst({left:0,top:0,radius:{5:40},children:{shape:"circle",fill:["red","cyan","orange"],fillOpacity:.8,radiusX:3.5,radiusY:3.5}});document.addEventListener("click",function(a){null==a.target.href&&"footer"!=a.target.className&&"copyright"!=a.target.className&&"author__urls social-icons"!=a.target.className&&"author__avatar"!=a.target.className&&"sidebar sidebar-active"!=a.target.className&&burst1.tune({x:a.pageX,y:a.pageY}).generate().replay()})</script><script type="text/javascript" src="/js/message.js"></script></html><!-- rebuild by neat -->